<%@ page import="org.springframework.util.StringUtils" %>
<%@ page import="java.util.Objects" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <!-- 引入Layui CSS -->
    <link href="https://cdn.jsdelivr.net/npm/layui@2.8.3/dist/css/layui.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
            font-family: "Microsoft YaHei", sans-serif;
            overflow: hidden;
        }

        .login-container {
            width: 380px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            z-index: 100;
            background: rgba(255, 255, 255, 0.95);
        }

        .login-header {
            padding: 25px;
            text-align: center;
            background: linear-gradient(45deg, #1E9FFF, #009688);
            color: white;
        }

        .login-header h2 {
            margin: 0;
            font-weight: 500;
            font-size: 24px;
        }

        .login-header p {
            margin: 5px 0 0;
            opacity: 0.8;
        }

        .login-body {
            padding: 30px;
        }

        .login-form {
            margin-top: 10px;
        }

        .login-footer {
            padding: 15px;
            text-align: center;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #eee;
        }

        .login-footer a {
            color: #1E9FFF;
            text-decoration: none;
        }

        .login-footer a:hover {
            text-decoration: underline;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 60px;
            padding-left: 5px;
        }

        .layui-input-block {
            margin-left: 90px;
        }

        .bg-bubbles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .bg-bubbles li {
            position: absolute;
            list-style: none;
            display: block;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.15);
            bottom: -160px;
            animation: square 25s infinite;
            transition-timing-function: linear;
            border-radius: 50%;
        }

        .bg-bubbles li:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .bg-bubbles li:nth-child(2) {
            left: 20%;
            width: 80px;
            height: 80px;
            animation-delay: 2s;
            animation-duration: 17s;
        }

        .bg-bubbles li:nth-child(3) {
            left: 25%;
            animation-delay: 4s;
        }

        .bg-bubbles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-duration: 22s;
            background-color: rgba(255, 255, 255, 0.25);
        }

        .bg-bubbles li:nth-child(5) {
            left: 70%;
        }

        .bg-bubbles li:nth-child(6) {
            left: 80%;
            width: 120px;
            height: 120px;
            animation-delay: 3s;
            background-color: rgba(255, 255, 255, 0.2);
        }

        .bg-bubbles li:nth-child(7) {
            left: 32%;
            width: 160px;
            height: 160px;
            animation-delay: 7s;
        }

        .bg-bubbles li:nth-child(8) {
            left: 55%;
            width: 20px;
            height: 20px;
            animation-delay: 15s;
            animation-duration: 40s;
        }

        .bg-bubbles li:nth-child(9) {
            left: 25%;
            width: 10px;
            height: 10px;
            animation-delay: 2s;
            animation-duration: 40s;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .bg-bubbles li:nth-child(10) {
            left: 90%;
            width: 160px;
            height: 160px;
            animation-delay: 11s;
        }

        @keyframes square {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-1200px) rotate(600deg);
            }
        }

        @media (max-width: 768px) {
            .login-container {
                width: 90%;
                margin: 0 auto;
            }

            .layui-form-label {
                width: 50px;
            }

            .layui-input-block {
                margin-left: 80px;
            }
        }
    </style>
</head>
<body>
<!-- 背景动画 -->
<ul class="bg-bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<%
    String username = "";

    Cookie[] cookies = request.getCookies();
    if (cookies != null) {
        for (Cookie cookie : cookies) {
            if (cookie.getName().equals("username")) {
                username = cookie.getValue();
                break;
            }

        }
    }
%>
<div class="login-container">
    <div class="login-header">
        <h2>系统登录</h2>
        <p>请输入您的账号和密码</p>
    </div>

    <div class="login-body">
        <form class="layui-form login-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" value="<% out.print(username); %>" required lay-verify="required" placeholder="请输入用户名" autocomplete="on" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block captcha-box">
                    <input type="text" name="captcha" required
                           lay-verify="required" placeholder="请输入验证码"
                           class="layui-input" style="width: 150px;">
                    <!-- 验证码图片，点击刷新 -->
                    <img src="/captcha"
                         alt="点击刷新验证码" class="captcha-img" id="captchaImg"
                         onclick="refreshCaptcha()">
                </div>
            </div>

            <div class="layui-form-item" style="height: 20px">
                <div class="layui-input-block">
                    <input type="checkbox" name="rememberMe" title="记住我" lay-skin="primary" <% out.print(Objects.equals(username,"")?"":"checked"); %> >
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
                </div>
            </div>



        </form>
    </div>

    <div class="login-footer">
        <p>还没有账号？<a href="#">立即注册</a> | <a href="#">忘记密码？</a></p>
    </div>


</div>

<!-- 引入Layui JS -->
<script src="https://cdn.jsdelivr.net/npm/layui@2.8.3/dist/layui.min.js"></script>
<script>
    function refreshCaptcha() {
        const captchaImg = document.getElementById('captchaImg');
        // 添加时间戳防止缓存
        captchaImg.src = '/captcha' + '?timestamp=' + new Date().getTime();
    }

    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        form.render(); // 更新全部表单相关的事件绑定
        // 表单提交
        form.on('submit(login)', function(data){
            $.ajax({
                url: '/login',
                type: 'POST',
                data: data.field,
                dataType: 'json',
                success: function(res){
                    if (res.success) {
                        layer.msg('登录成功', {icon: 1, time: 1000}, function(){
                            window.location.href = '/index.jsp';
                        });
                    }else{
                        layer.msg(res.message, {icon: 2, time: 2000});
                    }
                },
                error: function(xhr, type, error){
                   console.log(xhr);
                   console.log(type);
                   console.log(error);
                }
            });
            refreshCaptcha(); // 登录成功后刷新验证码，防止重复提交
            return false; // 阻止表单跳转

        });


    });
</script>
</body>
</html>